<template>
  <div style="z-index: 1">
    <el-table :data="dataLsit?dataLsit:''" style="width: 100%" stripe :table-layout="tableLayout" highlight-current-row
              @cell-dblclick="callback">
      <el-table-column type="index" width="100"/>
      <el-table-column label="下载" width="100">
        <template #default="scope">
          <div style="display: flex; align-items: center;cursor: pointer">
            <icon-to-bottom/>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="音乐标题" width="400"/>
      <el-table-column prop="ar[0].name" label="歌手" width="200 "/>
      <el-table-column prop="al.name" label="专辑"/>
      <el-table-column prop="address" label="时长" :formatter='transTime'/>
    </el-table>
    <div style="height: 140px"></div>
  </div>

</template>

<script setup>
import {ref, watch, nextTick} from 'vue'
import {useStore} from "vuex";

const tableLayout = 'fixed'
const props = defineProps(['dataList'])
const dataLsit = ref([])
watch(() => props.dataList, (nwevalue, oldValue) => {
  dataLsit.value = nwevalue
})


// 毫秒转分钟
function transTime(row, column) {
  let millis = row.dt
  var minutes = Math.floor(millis / 60000);
  var seconds = ((millis % 60000) / 1000).toFixed(0);
  return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
}


const store = useStore()
const callback = (row) => {
  store.dispatch('getplaying', row)
  store.commit('SET_IS_PLAY', true)
  sessionStorage.setItem('songId', row.id)
}

const onContextMenu = () => {
  console.log('right click')
}
</script>

<style scoped>
:deep(.el-table__row--striped) {
  z-index: 1;
}
</style>